<template>
  <el-upload
      ref="upload"
      class="upload-demo"
      drag
      action="string"
      :limit="1"
      :http-request="uploadFile"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :auto-upload="false"
      crossorigin="anonymous"
      accept="image/png, image/jpeg"
      with-credentials
  >
    <el-icon class="el-icon--upload">
      <upload-filled/>
    </el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        upload single jpg/png file < 1.00M
      </div>
    </template>
  </el-upload>
  <el-button class="ml-3" type="success" @click="submitUpload">
    Detect
  </el-button>
  <el-button class="ml-3" type="primary" @click="cameraHandler">
    Camera
  </el-button>
  <br>
  <br>
  <div class="img-container">
    <el-image style="width: 49%;" :src="imgUrl1" fit="cover"/>
    <el-image style="width: 49%;" :src="imgUrl2" fit="cover"/>
  </div>
  <br>
  <video id="Video" autoplay style="width: 100%; border: 3px solid #007aff"></video>
  <canvas id="output"></canvas>
  <br>
</template>

<script setup>
import {ref} from 'vue'
import {genFileId} from 'element-plus'
import axios from "axios";

const upload = ref()
const fileList = ref([])
const imgUrl1 = ref()
const imgUrl2 = ref()

function uploadFile(item) {
  console.log(item)
  const FormData = require('form-data');
  let data = new FormData();
  data.append('img', item.file);
  let config = {
    method: 'post',
    maxBodyLength: Infinity,
    url: 'https://openapi.sophnet.com/bjriscv01/api/yolo',
    headers: {},
    data: data
  };
  let st = Date.now()
  console.log(st)
  const intervalTime = 1000 * 5
  let intervalId = setInterval(() => {
    axios.request(config)
        .then((response) => {
          let data = response.data
          console.log(data)
          if (data.status === "done") {
            clearInterval(intervalId)
            console.log(data.result)
            imgUrl1.value = "https://openapi.sophnet.com/bjriscv01/static/yolo/" + data.result
            imgUrl2.value = "https://openapi.sophnet.com/bjriscv01/static/yolo/result/" + data.result
            console.log(Date.now() - st)
          }
        })
        .catch((error) => {
          console.log(error);
        });
  }, intervalTime)
}

const handleExceed = (files) => {
  console.log(files)
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
}

const submitUpload = () => {
  upload.value.submit()
}

const cameraHandler = () => {
  let video = document.getElementById('Video');
  alert(video)
  let success = function (stream) {
    console.log('摄像头开启成功')
    alert('摄像头开启成功')
    video.srcObject = stream
  }
  let error = (error) => {
    alert('调用失败')
    console.log(error)
  }
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
  navigator.getUserMedia({video: true, audio: false}, success, error)
}
</script>

<style scoped lang="less">
.img-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>